<script setup>
import { getCount } from '@/api/apis/home';
import { onMounted, ref } from 'vue';
const countlist = ref([])
const getcountlist = async () => {
    const res = await getCount()
    countlist.value = res

}

onMounted(() => getcountlist())
</script>

<template>
    <div class="countinfo">
        <el-card v-for="item in countlist" :key="item.id" :body-style="{ display: 'flex', padding: 0 }" shadow="hover">
            <component :is="item.icon" class="icons" :style="{ background: item.color }"></component>
            <div class="info">
                <p class="value">￥{{ item.value }}</p>
                <p class="name">{{ item.name }}</p>
            </div>
        </el-card>
    </div>
</template>

<style lang="less" scoped>
.countinfo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
        width: 32%;
        margin-bottom: 10px;

        .icons {
            width: 60px;
            height: 60px;
        }

        .info {
            line-height: 20px;
            text-align: center;
            margin-top: 10px;
            margin-left: 10px;

            .value {
                font-weight: 700;
                font-size: 30px;

            }

            .name {
                font-size: small;
                color: #b3b6be;
            }
        }
    }
}
</style>